<script>  
import UniCard from "../../uni_modules/uni-card/components/uni-card/uni-card.vue";  
  
export default {  
  name: "AddSecondarySchools",  
  components: { UniCard },  
  data() {  
    return {  
      schoolName: '',  
      visitDate: '',  
      promotionForm: '',  
      showError: false,  
      errorMessage: '请填写所有信息后提交！',  
    };  
  },  
  methods: {  
    submitForm() {  
      if (!this.schoolName || !this.visitDate || !this.promotionForm) {  
        this.showError = true;  
        setTimeout(() => {  
          this.showError = false; // 可选：延迟隐藏错误消息  
        }, 3000);  
      } else {  
        // 执行提交逻辑，例如调用 API  
        console.log('提交成功:', this.schoolName, this.visitDate, this.promotionForm);  
      }  
    }  
  }  
};  
</script>  
  
<template>  
  <view>  
    <uni-card class="ct1">  
      <view class="v2">  
        <uni-row>  
          <uni-col :span="4" class="col-left">  
            <view class="v1">  
              <text class="label">中学名称</text>  
              <text class="label2" v-if="!schoolName">*</text> 
            </view>  
          </uni-col>  
          <uni-col :span="20" class="col-right">  
            <view class="image-center">  
              <input type="text" v-model="schoolName" class="input" placeholder="请输入中学名称" />  
            </view>  
          </uni-col>  
        </uni-row>  
      </view>  
      <!-- 其他输入框也进行类似修改 -->  
      <view class="v2">  
        <uni-row>  
          <uni-col :span="4" class="col-left">  
            <view class="v1">  
              <text class="label">到访日期</text>  
              <text class="label2" v-if="!visitDate">*</text>  
            </view>  
          </uni-col>  
          <uni-col :span="20" class="col-right">  
            <view class="image-center">  
              <input type="text" v-model="visitDate" class="input" placeholder="请输入到访日期" />  
            </view>  
          </uni-col>  
        </uni-row>  
      </view>  
      <view class="v3">  
        <uni-row>  
          <uni-col :span="4" class="col-left">  
            <view class="v1">  
              <text class="label">宣传形式</text>  
              <text class="label2" v-if="!promotionForm">*</text>  
            </view>  
          </uni-col>  
          <uni-col :span="20" class="col-right">  
            <view class="image-center">  
              <input type="text" v-model="promotionForm" class="input" placeholder="请输入宣传形式" />  
            </view>  
          </uni-col>  
        </uni-row>  
      </view>  
    </uni-card>  
    <view class="error-message" v-if="showError">{{ errorMessage }}</view>  
    <button @click="submitForm" class="button">提交</button>  
  </view>  
</template> 
  
<style scoped lang="scss">  
$base-font-size: 12px;  
$input-height: 36px;  
$input-padding: 8px; // 假设输入框内边距  
.v1{
	margin-top: 9px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
}
.image-center {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.label{  
  color: #5d5c5c;
   font-size: 12px;
   font-face: PingFangSC;
   font-weight: 400;
   line-height: 0;
   letter-spacing: 0;
   paragraph-spacing: 0;
   text-align: left;
}  
.input{
	width: 84px;
	height: 17px;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #000000;
	letter-spacing: 0;
}
.label2{
	 color: #ff3636;
	 font-size: 12px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 0;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
  
.input {  
  width: 252px;
  height: 36px;
  background: #F1F5FF;
  border: 1px solid #E7EDFB;
  border-radius: 4px;
  padding-left: 12px;
}  
  
.v2, .v3 {  
  width: 319px;  
  height: $input-height;  
  margin-top: 16PX;

  margin-right: 12px;
  &.v3 {  
    margin-bottom: 16px;  
  }  
}  
  
.ct1 {  
  width: 343px;  
  height: 184px;  
  background: #FFFFFF;  
  border-radius: 8px;  
  margin: 16px; 
  padding: 0 !important; 
}  
  
.col-left, .col-right {  
  // 可以根据需要添加一些特定于列的样式  
}  

.button {  
    margin-top: 32px;  
    width: 343px;  
    height: 40px;  
    background: #276EFF;  
    border-radius: 8px;  
    border: none;   
    font-family: PingFangSC-Medium;  
    font-weight: 500;  
    font-size: 15px;  
    color: #FFFFFF;  
    letter-spacing: 0;  
    line-height: 20px;  
    text-align: center; 
    padding: 0 16px;
  
     padding-top: 10px;  
    padding-bottom: 10px; 
}
.error-message {  
    color: red;  
    text-align: center;  
    margin-top: 10px;  
} 
</style>